<template>
  <div>
    <div v-if="isShow">
      <!-- 管理员管理 -->
      <div id="div1">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="id" placeholder="请输入内容"></el-input>
          </el-form-item>
          <!-- 所属角色下拉菜单 -->
          <el-dropdown>
            <el-button>
              所属角色<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>角色1</el-dropdown-item>
              <el-dropdown-item>角色2</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- 启用状态下拉菜单 -->
          <el-dropdown>
            <el-button>
              启用状态<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>启用</el-dropdown-item>
              <el-dropdown-item>禁用</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- 查询按钮 -->
          <el-form-item>
            <!-- @click="get()" -->
            <el-button type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div id="div2">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-button type="primary" @click="add">新增管理员</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="tableData"
          border
          style="width: 95%; height: 70%"
          :header-cell-style="{ background: '#f3f3f3' }"
        >
          <el-table-column prop="id" label="编号" width="150">
          </el-table-column>
          <el-table-column prop="login" label="管理员账号" width="200">
          </el-table-column>
          <el-table-column prop="salt" label="所属角色" width="350">
          </el-table-column>

          <el-table-column prop="status" label="启用状态" width="150">
            <template slot-scope="scope">
              <el-tooltip :content="value" placement="top">
                <el-switch
                  v-model="scope.row.status"
                  on-color="#13ce66"
                  on-text="启动"
                  on-value="1"
                  off-color="#F04134"
                  off-text="禁止"
                  off-value="2"
                  @change="changeSwitch(scope.row)"
                >
                  width="150"
                </el-switch>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 操作栏 -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="get22(scope.row)" type="text" size="small"
                >查看</el-button
              >
              <el-button
                @click="modify_admin2(scope.row)"
                type="text"
                size="small"
                >修改</el-button
              >
              <el-button @click="del(scope.$index, tableData)" type="text" size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="limit"
          :total="total"
          @current-change="change"
          @prev-click="prev"
          @next-click="next"
        >
        </el-pagination>
        <!-- 查看信息 -->
        <el-dialog width="40%" title="管理员信息" :visible.sync="get2">
          <el-form :model="tableData2">
            <el-form-item label="管理员账号" :label-width="'100'">
              <el-input
                disabled
                v-model="tableData2.login"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="'100'">
              <el-input
                disabled
                v-model="tableData2.password"
                autocomplete="off"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="所属角色" :label-width="'100'">
              <el-input disabled v-model="tableData2.salt" autocomplete="off">
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="get2 = false">取 消</el-button>
            <el-button type="primary" @click="get2 = false">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 修改管理员信息 -->
        <el-dialog
          width="40%"
          title="修改管理员信息"
          :visible.sync="modify_admin"
        >
          <el-form
            :model="tableData2"
            :rules="rules"
            ref="tableData"
            class="demo-ruleForm"
          >
            <el-form-item label="姓名" :label-width="'100'">
              <el-input disabled v-model="tableData2.name" autocomplete="off">
              </el-input>
            </el-form-item>
            <el-form-item label="管理员账号" :label-width="'100'">
              <el-input
                v-model="tableData2.login"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="'100'">
              <el-input v-model="tableData2.password" autocomplete="off">
              </el-input>
            </el-form-item>
            <el-form-item label="所属角色" :label-width="'100'">
              <el-input disabled v-model="tableData2.salt" autocomplete="off">
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="modify_admin = false">取 消</el-button>
            <el-button type="primary" @click="modify_admin3()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <div v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      id: "",
      page: 1,
      limit: 5,
      total: 0,
      value: "",
      isShow: true,
      modify_admin: false,
      get2: false,
      reset: false,
      tableData: [],
      tableData2: {},

      //正则验证
      rules: {
        adminuser: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            pattern: /^[a-zA-z]\w{3,15}$/,
            message: "账号必须为4-16位字母、数字、下划线组成，字母开头",
            trigger: "blur",
          },
        ],
        adminpassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^[a-zA-z]\w{3,15}$/,
            message:
              "密码必须为长度6-12位；开头为首字母大写；只能由字母、数字或特殊字符$~!组成",
            trigger: "blur",
          },
        ],
        topassword: [
          { required: true, message: "请确认密码", trigger: "blur" },
          {
            pattern: /^[A-Z][a-a-zA-Z0-9$~!]{5,11}$/,
            message:
              "密码必须为长度6-12位；开头为首字母大写；只能由字母、数字或特殊字符$~!组成",
            trigger: "blur",
          },
        ],
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            pattern: /^[\u4e00-\u9fa5]{1,6}$/,
            message: "请输入正确的名字",
            trigger: "blur",
          },
        ],
        phone_num: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        e_mail: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern:
              /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
            message: "请输入正确的电子邮箱",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    changeSwitch(data) {
      console.log(data);
    },
    //回显弹出框inport里面的信息
    get22(row) {
      this.get2 = true;
      this.tableData2 = row;
      console.log(row);
    },
    modify_admin2(row) {
      this.modify_admin = true;
      this.tableData2 = row;
      console.log(this.tableData2);
    },
    modify_admin3() {
      this.$axios({
        url: "/admin/update",
        method: "post",
        data: {
          id: this.tableData2.id,
          name: this.tableData2.name,
          login: this.tableData2.login,
          salt: this.tableData2.salt,
          password: this.password,
        },
      }).then((res) => {
        if (res.data.code == 500) {
        } else {
          this.$message.success("修改成功");
          this.modify_admin = false;
        }
        this.getCon();
      });
    },
    //查询
    // get() {
    //   this.$axios({
    //     url:'admin/find',
    //     params:{
    //       id:this.id,
    //     }
    //   }).then((res)=>{
    //     this.tableData=res.data.data;
    //   })
    // },
    /* 删除渲染 */
    del(index, data){
      console.log(index, data);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        this.$axios({
          url:'/admin/delete',
          method:'post',
          data:{
            id: data[index].id,
          }
        }).then((res) => {
            if (res.data.code == 500) {
              this.$message.error("删除失败");
            } else {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getCon();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //页面渲染和页码
    getCon() {
      this.$axios({
        url: "/admin/list",
        method: "post",
        data: {
          page: this.page,
          limit: this.limit,
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        this.total = res.data.count;

        for (let item of this.tableData) {
          item.status == true ? (item.status = true) : (item.status = false);
        }
      });
    },
    change(page) {
      this.page = page;
      this.getCon();
    },
    prev() {
      this.page--;
      this.getCon();
    },
    next() {
      this.page++;
      this.getCon();
    },
    //新增角色
    add() {
      this.isShow = !this.isShow;
      this.$router.push("/Company/GetRolemanagement");
    },
  },
  mounted() {
    this.getCon();
    sessionStorage.setItem("fName", "Rolemanagement");
  },
};
</script>
<style lang="less" scoped>
.el-pagination {
  margin-top: 20px;
  float: right;
}
#div1 {
  width: 90%;
  height: 60px;
  background: #f7f7f7;
  .el-form-item {
    padding: 10px 20px;
  }
}
#div2 {
  width: 90%;
  height: 500px;
  margin-top: 30px;
  background: #f7f7f7;
  .el-form-item {
    padding: 10px 20px;
  }
  .el-table {
    margin-left: 20px;
    // .el-table td, .el-table th{
    //   text-align: center !important;
    // }
  }
}
.el-dropdown {
  vertical-align: top;
  padding: 10px 20px;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>